<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
 <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.box{
/* Safari 设为 Flex 布局以后，子元素的float、clear和vertical-align属 属性将失效。*/
  display: -webkit-flex; 
  display: flex;
  flex-direction: column ;
  flex-wrap: nowrap;
  justify-content: flex-start;
   align-items: flex-start;
  width:50em;
  height:50em;
}
.chat_box{
}
.chat_box > .chat_top{
}
.chat_box > .chat_main{
 
}
.chat_box > .chat_main >.leftrow{
 width:100%;
 height:40em;
}
.chat_box > .chat_main >.rightrow{
 width:100%;
  height:40em;
}
.chat_box > .chat_bottom{
  flex-direction: row ;
  flex-wrap: wrap;
}
</style>
</head>
<body>

<div class="chat_box" >
<div class="chat_top">
 客服[]
</div>
<div class="chat_main">
<div class="row">
<div class="head">
</div>
<div class="msg">
</div>
</div>
<div class="row">

<div class="msg">
</div>
<div class="head">
</div>
</div>
</div>
<div class="chat_bottom">
<textarea rows="30" cols="2"></textarea>
</div>
</div>

</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>

</html>